
{% extends "../../_ie8.twig" %}

{% set dataversion = "" %}

{% block header %}
<link rel="stylesheet" href="message/assets/css/index.css?v={{random()}}">
<link rel="stylesheet" href="message/assets/css/message.css?v={{random()}}">
<link rel="stylesheet" href="./index.css?v={{random()}}">
<link rel="stylesheet" href="../grid/index.css?v={{random()}}">
<!--[if !IE]><!--><script src="https://cdn.bootcss.com/prism/9000.0.1/prism.min.js"></script><!--<![endif]-->
<style>
/* 导出用 */
body {        
    background: #fff;
}
.app-pyq-msg__after {        
    background-color: #f0f0f0;
}
.app-pyq-msg__content {
    width: 360px;
}
.exp-export .app-pyq-msg__content {
    width: 740px;
}
.u-clear-fix:after {
    content: "";
    display: table;
    clear: both;
}
.ellip {
  display: block;
  height: 100%;
}

.ellip-line {
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  max-width: 100%;
}

.ellip,
.ellip-line {
  position: relative;
  overflow: hidden;
}

{# 测试用 #}
nav > a {
   cursor: pointer;
}
nav > a.active {
    color: #0099FF;
}
.container {
    display: none;
}
.container.open {
    display: block;
}
.a-certificate {
    width: 431px;
}
.aux-preview-code {
    padding: 10px;
    display: none;
}
.aux-preview-code.active {
    display: block;
}
.aux-preview-code:before {
    content: "code:";
    display: block;
    border-bottom: 1px solid #666;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
pre {
    max-height: 180px;
}
</style>
{% endblock %}

{% block body %}
<link href="https://cdn.bootcss.com/prism/9000.0.1/themes/prism.css" rel="stylesheet">
    <nav id="nav">
        <a for="pongyouquan">朋友圈</a>
        <a for="jiaoyi">交易</a>        
        <a for="friendszhuanzhang">好友转账</a>
    </nav>
    <main id="content">
        {% include "./penyouquan/_index.twig" %}
        {% include "./certificate/_index.twig" %}
        {% include "./transfer/_index.twig" %}
    </main>    

    <script>
function getTextWidth(text, font) {        
    // re-use canvas object for better performance                    
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");    
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;    
}
var isIE = '\v'=='v';

        window.onload = function() {
            var lists = document.querySelectorAll(".app-pyq-msg__link .app-pyq-msg__main");
            if (lists) {
                Array.prototype.slice.call(lists).forEach(function(v) {                
                    if (v.scrollHeight > v.offsetHeight) {
                        {# v.textContent = v.textContent.substr(0, 60); #}
                        if (!isIE) {
                            var w = 1;
                            //var computedStyle = window.getComputedStyle(v);
                            var font = 'normal normal 400 normal 14px / 20px Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, tahoma, arial, "WenQuanYi Micro Hei", Verdana, sans-serif';
                            var lock = true;
                            var index = 10;    
                            var str  = "";         
                            var lastlen =  0;           
                            {# var fz = parseFloat(computedStyle.fontSize.replace("px", "")) + 1; #}
                            var fz = 15;
                            var firstlineindex = 0;
                            while (lock) {
                                if (index > v.textContent.length - 1) {
                                    lock = false;
                                }
                                str = v.textContent.substr(lastlen, index);
                                w = getTextWidth(str, font);
                                if (w > v.offsetWidth - fz) {
                                    lock = false;
                                    firstlineindex = index;
                                } else {
                                    index++;
                                }
                            }
                            lock = true;
                            lastlen =  index; 
                            index = 1;                        
                            while (lock) {
                                if (index > v.textContent.length - 1) {
                                    lock = false;
                                }
                                str = v.textContent.substr(lastlen, index);
                                w = getTextWidth(str, font);
                                if (w > v.offsetWidth - fz) {
                                    lock = false;
                                } else {
                                    index++;
                                }
                            }
                            v.setAttribute("title", v.textContent);
                            console.log("cut", font, v.textContent.substring(0, (firstlineindex + index - 1)).trim());
                            v.textContent = v.textContent.substring(0, (firstlineindex + index - 1)).trim() + "...";            
                        } else {
                            v.classList.add("multi-line-overflow")
                        }
                    } 
                });
            }
        }
    </script>

    {# 发布时不要加载index.js #}
    <script src="./not-include-index.js?v={{random()}}"></script>
{% endblock %}


